<template>
  <div>
    <!--1视图-->
    <el-table :data="transportList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="货物编号" prop="id" />
      <el-table-column label="农户" prop="farmer" />
      <el-table-column label="原料来源" prop="cropName" />
      <el-table-column label="时间" prop="indate" />
      <el-table-column label="pic" prop="pic">
        <template slot-scope="scope">
          <img :src="scope.row.pic" width="100px"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status == 0">未质检</el-tag>
          <el-tag v-show="scope.row.status == 1">合格</el-tag>
          <el-tag v-show="scope.row.status == 2">有毒</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-show="scope.row.status == 0" size="mini" type="text" @click="outFactory(scope.row)">质检</el-button>
<!--          <el-button v-show="scope.row.status == 1" size="mini" type="text" @click="noticeTransport(scope.row)">通知运输(1)</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测结果" prop="nickName">
              <el-radio v-model="form.status" label="1">无毒</el-radio>
              <el-radio v-model="form.status" label="2">有毒</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测图片:">
              <el-upload  class="avatar-uploader"
                          action="http://localhost:10010/cropservice/crop/addPic"
                          :show-file-list="false"
                          :on-success="getFile"
                          :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" width="50%" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="生产厂商" prop="nickName">
              <el-select v-model="form.shengproductId" placeholder="请选择">
                <el-option v-for="dept in factoryList" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createMaching">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog center title="联系运输" :visible.sync="noticeDetaiDialog" width="500px" append-to-body>
      <el-form ref="form" :model="trasportForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="生产厂商" prop="nickName">
              <el-select v-model="trasportForm.shengproductId" placeholder="请选择">
                <el-option v-for="dept in factoryList" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNoticeTrasport">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>


export default {
  name: "IngredientsView",
  data() {
    return {
      //2属性定义
      transportList:[],
      open:false,
      title: '',
      form:{},
      imageUrl:"",
      noticeDetaiDialog:false,
      trasportForm:{},
      myForm:{},
      driverList:[],
      factoryList:[],
      size:3,
      total:0,
      current:1,
    }
  }, methods: {

    getfactoryList(){
      this.axios.post("/cropservice/crop/getFactoryList").then(
          res=>{
            this.factoryList=res.data.data;
          }
      )
    },
    getdriverList(){
      this.axios.post("/cropservice/crop/getHaulerList").then(
          res=>{
            this.driverList=res.data.data;
          }
      )
    },

    noticeTransport(row){
      this.getfactoryList();
      this.myForm = row;
      this.noticeDetaiDialog = true
    },
    createMaching(){
      this.axios.post("/cropservice/crop/goproduct",this.form).then(
          res=>{
            if (res.data.code==200){
              this.form={};
             this.$message.success("审核成功");
             this.open=false;
            }
          }
      )
    },
    getFile(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      alert(res)
      this.form.pic=res;

    },
    outFactory(row){
      this.form = row;
      this.open = true;
      this.getfactoryList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getransportList();
    },
    getransportList(){
      this.axios.post("/cropservice/crop/IngredientsCropServiceList?current="+this.current+"&size="+this.size).then(
          res=>{
            this.transportList=res.data.data.list;
            this.total=res.data.data.total;
          }
      )
    }
    //3自定义方法
  }, created() {
    this.getransportList()
    //4.钩子函数
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>